<template>
  <a-row :gutter="24">
    <a-col :span="6" v-for="(item,index) in items" :key="index">
      <div class="item-column item" @click="itemClick(item)" :class="item.hasPermission?'':'item-disable'">
        <img class="item-img" :src="item.icon">
        <div class="item-name">{{item.name}}></div>
      </div>
    </a-col>
    <task-create ref="taskCreate" @createSuccess="goTaskList"></task-create>
  </a-row>
</template>

<script>
  //首页
  import TaskCreate from "../task/TaskCreate";
  import {mapState} from "vuex";
  import {USER_AUTH, SYS_BUTTON_AUTH} from "@/store/mutation-types"

  export default {
    name: "Index",
    components: {TaskCreate},
    data() {
      return {
        items: [
          {name: '任务统计', route: '/task/statistics', hasPermission: false, icon: require('@/assets/index_img/task.png')},
          {name: '网站数据', route: '/net/data', hasPermission: false, icon: require('@/assets/index_img/data.png')},
          {name: '内容管理', route: '/content/list', hasPermission: false, icon: require('@/assets/index_img/content.png')},
          {name: '直播管理', route: '/live/list', hasPermission: false, icon: require('@/assets/index_img/live.png')},
          {
            name: '素材库',
            route: '/material/list',
            hasPermission: false,
            icon: require('@/assets/index_img/material.png')
          },
          {name: '全媒体内容库', route: '/disk/list', hasPermission: false, icon: require('@/assets/index_img/class.png')},
          {
            name: '创建选题',
            ref: 'taskCreate',
            buttonPermission: 'task:create',
            hasPermission: false,
            icon: require('@/assets/index_img/create_task.png')
          },
          {name: '会员管理', route: '/member/list', hasPermission: false, icon: require('@/assets/index_img/user.png')},
        ]
      }
    },
    computed: {
      ...mapState({
        // 后台菜单
        permissionMenuList: state => state.user.permissionList
      }),
    },
    created() {
      this.items.map(item => {
        const result = this.hasMenuPermission(item.route, item.buttonPermission, this.permissionMenuList);
        if (typeof result === 'boolean') {
          item.hasPermission = result;
        }
      })
    },
    methods: {
      //判断是否有此菜单权限
      hasMenuPermission(route, buttonPermission, source) {
        if (route) {
          for (let i = 0; i < source.length; i++) {
            const item = source[i];
            if (item.path == route) {
              return true;
            }
            if (item.children) {
              const result = this.hasMenuPermission(route, buttonPermission, item.children);
              if (result) {
                return true;
              }
            }
          }
        } else {
          return this.filterGlobalPermission(buttonPermission)
        }
      },
      filterGlobalPermission(permission) {
        let permissionList = [];
        let allPermissionList = [];
        let authList = JSON.parse(sessionStorage.getItem(USER_AUTH) || "[]");
        for (let auth of authList) {
          if (auth.type != '2') {
            permissionList.push(auth);
          }
        }
        let allAuthList = JSON.parse(sessionStorage.getItem(SYS_BUTTON_AUTH) || "[]");
        for (let gauth of allAuthList) {
          if (gauth.type != '2') {
            allPermissionList.push(gauth);
          }
        }
        //设置全局配置是否有命中
        let invalidFlag = false;//无效命中
        if (allPermissionList != null && allPermissionList != "" && allPermissionList != undefined && allPermissionList.length > 0) {
          for (let itemG of allPermissionList) {
            if (permission === itemG.action) {
              if (itemG.status == '0') {
                invalidFlag = true;
                break;
              }
            }
          }
        }
        if (invalidFlag) {
          return true;
        }
        if (permissionList === null || permissionList === "" || permissionList === undefined || permissionList.length <= 0) {
          return false;
        }
        let permissions = [];
        for (let item of permissionList) {
          //权限策略1显示2禁用
          if (item.type != '2') {
            if (item.action) {
              if (item.action.includes(",")) {
                let split = item.action.split(",")
                for (let i = 0; i < split.length; i++) {
                  if (!split[i] || split[i].length == 0) {
                    continue;
                  }
                  permissions.push(split[i]);
                }
              } else {
                permissions.push(item.action);
              }
            }
          }
        }
        if (!permissions.includes(permission)) {
          return false
        }
        return true;
      },
      //去任务列表
      goTaskList() {
        this.$router.push('/task/list')
      },
      itemClick(item) {
        if (item.hasPermission) {
          if (item.route) {
            this.$router.push(item.route)
          } else {
            this.$refs[item.ref].show();
          }
        } else {
          this.$message.warning('您还没有此权限，请联系管理员授权')
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .item {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 24px;
    min-height: 30vh;
    cursor: pointer;

    &-disable {
      background-color: #ccc8c8;
    }

    &-img {
      width: 80px;
      height: auto;
    }

    &-name {
      font-size: 18px;
      font-weight: bold;
      margin-top: 10px;
    }

    &-column {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
    }
  }

  .item:hover {
    opacity: 0.85;
    box-shadow: 2px 2px 6px 3px rgba(0, 0, 0, 0.1);
    transform: scale(1.05, 1.05);
    transition: all 300ms;
  }

</style>